<template>
  <div class="left-center">
    <nav class="title"></nav>
    <main class="content">
      <div class="top">
        <div class="top-left">
          <div class="left-icon"></div>
          <div class="right-label">
            <div class="title-content">解决诉求</div>
            <div class="number-label">
              <strong class="number">100</strong>
              <span class="suffix">个</span>
            </div>
          </div>
        </div>
        <div class="top-right">
          <div class="right-icon"></div>
          <div class="right-label">
            <div class="title-content">企业满意度</div>
            <div class="number-label">
              <strong class="number">96</strong>
              <span class="suffix">%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <app-vue-echarts :option="getLeftOption()"/>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts" name="LeftTop">
import {getLeftOption} from '../options/leftCenter/left'

</script>

<style scoped lang="less">
.left-center{
  width: 490px;
  height: 278px;
  position: absolute;
  left: 10px;
  top: 365px;
  .title{
    width: 450px;
    height: 35px;
    margin: 13.22px 10px 0 10px;
    background-image: url(../assets/left-center.svg);
  }
  .content{
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    .top{
      width: 100%;
      height: 50%;
      display: flex;
      justify-content: space-between;
      padding-left: 30px;
      &::after {
        content: '';
        width: 360px;
        height: 1px;
        background-color: #334160;
        position: absolute;
        left: 50px;
        top: 190px;
        bottom: 98px;
        box-sizing: border-box;
      }
      .top-left{
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding-left: 20px;
        position: relative;
        &::after {
          content: '';
          width: 100px;
          height: 1px;
          background-color: #334160;
          position: absolute;
          left: 150px;
          top: 75px;
          bottom: 98px;
          box-sizing: border-box;
          transform: rotate(90deg);
        }
        .left-icon{
          width: 50px;
          height: 50px;
          background-image: url(../assets/left-center/left.svg);
        }
        .right-label{
          margin-left: 15px;
          .title-content{
            font-size: 14px;
            color: #A1C1FF;
          }
        }
        .number-label{
          margin-top: 5px;
          .number{
            font-weight: 700;
            font-size: 35px;
            color: #A1C1FF;
          }
          .suffix{
            margin-left: 5px;
            color: #A1C1FF;
          }
        }
      }
      .top-right{
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding-left: 15px;
        .right-icon{
          width: 50px;
          height: 50px;
          background-image: url(../assets/left-center/right.svg);
        }
        .right-label{
          margin-left: 15px;
          .title-content{
            font-size: 14px;
            color: #A1C1FF;
          }
        }
        .number-label{
          margin-top: 5px;
          .number{
            font-weight: 700;
            font-size: 35px;
            color: #A1C1FF;
          }
          .suffix{
            margin-left: 5px;
            color: #A1C1FF;
          }
        }
      }
    }
    .bottom{
      width: 100%;
      height: 50%;
      box-sizing: border-box;
      padding: 20px 20px 0 20px;
    }
  }
}
</style>
